<template>
  <div class="centerMateial_contaienr">
    <!-- 基本信息 -->
    <div class="baseInfo">
      <div class="baseInfo_title">
        <div class="baseInfo_msg">基本信息</div>
        <div
          class="baseInfo_right"
          v-if="aimUserInfo.id === userInfo.id"
          @click="baseEditor"
        >
          <a href="javascript:;">{{ flag.baseEditor ? "" : "编辑" }}</a>
        </div>
        <!-- 移动端提示文字 -->
        <div
          class="title_hint d-block d-md-none"
          v-if="aimUserInfo.id === userInfo.id"
        >
          移动端暂不支持修改资料
        </div>
      </div>
      <div class="baseInfo_content">
        <div class="nickname">
          <div class="overview_left">
            <div class="uname">用户昵称</div>
            <div class="uinput" v-if="!flag.baseEditor">
              {{ aimUserInfo.nickName | uncodeUtf16 }}
            </div>
            <div class="uinput" v-else>
              <el-input
                v-model="baseInfo.nickName"
                size="small"
                placeholder="请输入内容"
              ></el-input>
              <span class="rule">用户名为1-12个字符</span>
            </div>
          </div>
        </div>
        <div class="username">
          <div class="overview_left">
            <div class="uname">
              <span>用</span>
              <span>户</span>
              <span>ID</span>
            </div>
            <div class="uinput" v-if="!flag.baseEditor">
              {{ aimUserInfo.userName }}
            </div>
            <div class="uinput" v-else>
              <el-tooltip
                class="item"
                effect="dark"
                content="用户 ID 是唯一的不可更改"
                placement="top"
              >
                <el-input
                  size="small"
                  v-model="baseInfo.userName"
                  :disabled="true"
                  placeholder="请输入内容"
                ></el-input>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="gender">
          <div class="overview_left">
            <div class="uname">
              <span>性</span>
              <span>别</span>
            </div>
            <div class="uinput" v-if="!flag.baseEditor">
              {{
                aimUserInfo.gender === 2
                  ? "未知"
                  : aimUserInfo.gender === 1
                  ? "男"
                  : "女"
              }}
            </div>
            <div class="uinput" style="padding-top: 4px" v-else>
              <el-radio v-model="baseInfo.gender" :label="1">男</el-radio>
              <el-radio v-model="baseInfo.gender" :label="0">女</el-radio>
            </div>
          </div>
        </div>
        <div class="email">
          <div class="overview_left">
            <div class="uname">
              <span>邮</span>
              <span>箱</span>
            </div>
            <div class="uinput" v-if="!flag.baseEditor">
              {{ aimUserInfo.email }}
            </div>
            <div class="uinput" v-else>
              <el-input
                v-model="baseInfo.email"
                size="small"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="tel">
          <div class="overview_left">
            <div class="uname">
              <span>电</span>
              <span>话</span>
            </div>
            <div
              class="uinput"
              v-if="!flag.baseEditor"
              :style="aimUserInfo.tel ? '' : 'color:#999aaa'"
            >
              {{ aimUserInfo.tel ? aimUserInfo.tel : "未填写" }}
            </div>
            <div class="uinput" v-else>
              <el-input
                v-model="baseInfo.tel"
                size="small"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="about">
          <div class="overview_left">
            <div class="uname">个人简介</div>
            <div
              class="uinput"
              v-if="!flag.baseEditor"
              :style="aimUserInfo?.description ? '' : 'color:#999aaa'"
            >
              {{ handlerEmoji | uncodeUtf16 }}
            </div>
            <div class="uinput" v-else>
              <el-input
                v-model="baseInfo.description"
                size="small"
                type="textarea"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="addr">
          <div class="overview_left">
            <div class="uname">所在地区</div>
            <div
              class="uinput"
              v-if="!flag.baseEditor"
              :style="params.city ? '' : 'color:#999aaa'"
            >
              <!-- {{ baseInfo?.addr[0] ? handlerCity : "未选择" }} -->
              {{ addr ? addr : handlerCity }}
            </div>
            <div class="uinput" v-else>
              <el-cascader
                size="large"
                :options="options"
                v-model="baseInfo.addr"
                @change="handleChange"
              >
              </el-cascader>
            </div>
          </div>
        </div>
        <div class="baseSave" v-if="flag.baseEditor">
          <el-button type="primary" size="small" @click="baseSave"
            >保存编辑</el-button
          >
          <el-button type="danger" size="small" @click="baseCancel"
            >取消编辑</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { regionData, CodeToText } from "element-china-area-data"; //导入地图数据
import { updateInfo } from "@/api/users";

export default {
  name: "CenterMateial",
  computed: {
    ...mapState("user", ["aimUserInfo", "userInfo"]),
    // 将省市县连接起来
    handlerCity() {
      this.handleChange();
      if (!this.params.city) return "未填写";
      let arr = [];
      for (const key in this.params) {
        arr.push(this.params[key]);
      }
      if (arr[0] === arr[1]) {
        this.addr = `${arr[0]}-${arr[2]}`;
      } else {
        this.addr = arr.join("-");
      }
      return this.addr;
    },
    // 处理个人简介的emoji表情问题
    handlerEmoji() {
      return this.aimUserInfo.description
        ? this.aimUserInfo.description
        : "未填写";
    },
  },
  watch: {
    aimUserInfo() {
      this.resetBaseInfo();
    },
  },
  data() {
    return {
      // 阀门
      flag: {
        baseEditor: false,
      },
      // 基本用户信息
      baseInfo: {
        nickName: "",
        userName: "",
        gender: "",
        email: "",
        tel: "",
        description: "",
        addr: [],
      },
      // 省市区
      options: regionData,
      params: {
        province: "",
        city: "",
        area: "",
      },
      // 省市区转换完成
      addr: "",
    };
  },
  methods: {
    // 基本用户信息填写
    baseEditor() {
      this.flag.baseEditor = true;
    },
    // 基本用户信息保存和取消
    async baseSave() {
      let { nickName, addr, gender, description, tel, email } = this.baseInfo;
      // 校验参数是否合法
      if (nickName.length >= 1 && nickName.length <= 12) {
        let options = {
          user_id: this.aimUserInfo.user_id,
          nickName: this.$emoji.utf16toEntities(nickName),
          addr: addr.join("-"),
          gender,
          description: this.$emoji.utf16toEntities(description),
          tel,
          email,
        };
        for (const key in options) {
          if (!options[key]) {
            delete options[key];
          }
        }
        let result = await updateInfo(options);
        if (result.code === 200) {
          this.flag.baseEditor = false;
          this.$win("更新用户信息成功");
          this.$nextTick(() => {
            return location.reload();
          });
        }
      } else {
        return this.$win("用户名为1-12个字符", "error");
      }
    },
    baseCancel() {
      this.resetBaseInfo();
      this.flag.baseEditor = false;
    },
    // 修改省市县
    handleChange() {
      //因为上边选择好城市之后打印出来的是编码，这里是将编码转换为文字
      let province = CodeToText[this.baseInfo.addr[0]]; //省
      let city = CodeToText[this.baseInfo.addr[1]]; //市
      let area = CodeToText[this.baseInfo.addr[2]]; //区(三级联动带区的话可以加上这个，二级联动不需要这个)
      if (city == "市辖区") {
        //选择北京市的话，第二个选项为输入框
        city = province; //这里根据后台需求，给它赋值，我这里是如果为市辖区，城市和省名字保持一致
      }
      //这里是请求赋值
      this.params.province = province;
      this.params.city = city;
      this.params.area = area; //三级联动带区可以加上，二级联动(省市)不需要
    },
    // 初始化数据
    resetBaseInfo() {
      let { nickName, userName, gender, email, tel, description, addr } =
        this.aimUserInfo;
      this.baseInfo = {
        nickName,
        userName,
        gender,
        email,
        tel,
        description,
        addr: addr ? addr.split("-") : "未选择",
      };
    },
  },
  mounted() {
    this.$parent.active = 1;
    this.resetBaseInfo();
  },
};
</script>

<style lang="less" scoped>
.centerMateial_contaienr {
  .baseInfo {
    background: #fff;
    padding-top: 16px;
    .baseInfo_title {
      padding-left: 6px;
      height: 48px;
      line-height: 48px;
      font-size: 18px;
      text-align: left;
      border-bottom: var(--main-border-bottom);
      display: flex;
      justify-content: space-between;
      .baseInfo_msg {
        font-size: 18px;
      }
      .baseInfo_right {
        font-size: 14px;
        color: #cdcdcd;
      }
      .title_hint {
        font-size: 12px;
        color: #ccc;
        text-align: right;
      }
    }
    .baseInfo_content {
      text-align: left;
      font-size: 15px;
      padding: 16px;
      & > div {
        margin: 10px 20px 24px;
        line-height: 30px;
        &:last-of-type {
          margin: 10px 20px 14px;
        }
        .overview_left {
          display: flex;
          .uname {
            color: #555666;
            width: 64px;
            display: flex;
            justify-content: space-between;
            margin-right: 34px;
          }
          .uinput {
            flex: auto;
            color: #222226;
            display: flex;
            align-items: center;
            max-width: 790px;
            /deep/ .el-textarea__inner {
              height: 100px !important;
            }
            .el-input {
              max-width: 240px;
            }
            .rule {
              flex: auto;
              margin-left: 20px;
              color: #999;
              font-size: 13px;
            }
          }
        }
      }
      /deep/ .baseSave {
        margin-top: 40px !important;
        button:first-of-type {
          margin-right: 6px;
        }
      }
    }
    .addr {
      margin-top: 20px !important;
    }
  }
}
</style>